<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="/lib/react.js"></script>
  <script src="/lib/react-dom.js"></script>
  <script src="/lib/babel.js"></script>
  <script type="text/babel">
    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          current: 0,
          mives: ["大话西游", "喜气洋洋", "抓娃娃", "红孩儿"],
        };
      }
      chooseMive(index) {
        this.setState({
          current: index,
        });
      }
      mapMovies = (item, index) => { // 利用箭头函数是为了保障this的指向
        const { current } = this.state;
        return (
          <li
            key={index}
            onClick={() => this.chooseMive(index)}
            className={current === index ? "active" : ""}
          >
            {item}
          </li>
        );
      }
      render() {
        const { mives, current } = this.state;
        const mivesLi = mives.map(this.mapMovies);
        return <ul>{mivesLi}</ul>;
      }
    }

    const rootEl = document.querySelector("#root");
    const root = ReactDOM.createRoot(rootEl);
    root.render(<App />);
  </script>
</html>
